<template>
  <div class="menu">
    <!-- 菜单组件 default-active：默认菜单激活的index的值 （默认选中的菜单）-->
    <!-- mode：菜单展示模式（水平horizontal、垂直vertical） -->
    <!-- @select：选中点击菜单触发的回调方法 -->
    <!-- 要绑数字或布尔值要用 ： 动态绑定 -->
    <el-menu :collapse="false" :default-active="activeIndex2" class="el-menu-demo" mode="vertical" background-color="#545c64"
      text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
      <!-- 菜单的每一项 index：唯一的标志 -->
      <el-menu-item index="1">
        <el-icon><House/></el-icon>
        <template #title>
          首页
        </template>
      </el-menu-item>
      <!-- 嵌套的层级菜单 -->
      <el-sub-menu index="2">
        <!-- 菜单的名称 -->
        <template #title>一级菜单</template>
        <el-menu-item index="2-1">一级菜单-1</el-menu-item>
        <el-menu-item index="2-2">一级菜单-2</el-menu-item>
        <el-menu-item index="2-3">一级菜单-3</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>二级菜单</template>
          <el-menu-item index="2-4-1">二级菜单-1</el-menu-item>
          <el-menu-item index="2-4-2">二级菜单-2</el-menu-item>
          <el-menu-item index="2-4-3">二级菜单-3</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!-- disabled：禁用菜单 -->
      <el-menu-item index="3" disabled>Info</el-menu-item>
      <el-menu-item index="4">Orders</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { House } from '@element-plus/icons-vue';
import { ref } from 'vue'

// 默认绑定的激活菜单指定的index的值
// 激活菜单index取值，如果是多级菜单，必须取菜单子项的index例如2-1
// 不能取el-sub-menu上index的值
const activeIndex2 = ref('1')

//选择菜单触发
// key:当前菜单的index  keyPath:当前菜单所在的完整路径 
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.menu{
  max-width:300px;
}
</style>